<template>
  <div class="order_form">
    <li @click="showPopup"><van-icon name="bag-o" /> 我的订单</li>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <p class="my_set_title">我的订单</p>
      <!-- 订单列表 -->
      <div
        class="cateList"
        v-for="(item, index) in list"
        :key="index"
        @click="goTo(item.cate_id)"
      >
        <div class="cateList_left">
          <img :src="item.img" />
        </div>
        <div class="cateList_right">
          <p class="title">{{ item.name }}</p>
          <p class="num">x1</p>
          <p class="money">￥{{ item.price }}</p>
          <router-link :to="`evaluate?cate_id=${item.cate_id}&img=${item.img}`"
            >评价</router-link
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { getFunc } from "@/http/request.js";

export default {
  data() {
    return {
      show: false,
      list: [],
    };
  },
  methods: {
    goTo(id) {
      this.$router.push(`/CateDetail/cate?cata_id=${id}`);
    },
    showPopup() {
      this.show = true;
    },

    async initList(data) {
      // 请求服务器获取美食信息
      await getFunc(`/cate/detail?cate_id=${data}`).then((data) => {
        if (data.code == 200) {
          this.list.push(data.result[0]);
        }
      });
    },
  },
  computed: {
    ...mapState(["order_form"]),
  },
  mounted() {
    this.order_form.forEach((item) => {
      this.initList(item.cid);
    });
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.my_set_title {
  text-align: center;
  height: 15vw;
  line-height: 15vw;
  font-size: 5.5vw;
  background-color: #eee;
}
.order_form {
  .cateList {
    padding: 2vw 4vw;
    height: 38vw;
    margin: 3vw;
    position: relative;
    // background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 5vw;
    .cateList_left {
      position: absolute;
      left: 2vw;
      top: 2vw;
      width: 25vw;
      height: 25vw;
      img {
        width: 100%;
        height: 100%;
        border-radius: 2vw;
      }
    }
    .cateList_right {
      margin-left: 28vw;
      p {
        margin-bottom: 2vw;
      }
      .title {
        margin-bottom: 9vw;
      }
      .money {
        text-align: right;
      }
      .num {
        text-align: right;
        font-size: 3.2vw;
        color: #aaa;
      }
      a {
        position: absolute;
        display: block;
        text-align: center;
        bottom: 2vw;
        right: 2vw;
        background-color: #fff;
        border: 1px solid $bgc;
        height: 6vw;
        width: 14vw;
        border-radius: 6vw;
      }
    }
  }
}
</style>